
<div class="layui-fluid" style="padding: 15px">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header" style="height: 230px">
                    发货人
                    <hr/>
                    <form class="layui-form layui-form-pane" action="#" lay-filter="example">
                        <div class="layui-col-md3">
                            <div class="layui-form-item">
                                <label class="layui-form-label">发货单位：</label>
                                <div class="layui-inline">
                                    <input name="forwardingunit" class="layui-input" id="forwardingunit" autocomplete="off">
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md3">
                            <div class="layui-form-item">
                                <label class="layui-form-label"> 发货人： </label>
                                <div class="layui-inline">
                                    <input name="clientname" class="layui-input" id="clientname" autocomplete="off">
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md3">
                            <div class="layui-form-item">
                                <label class="layui-form-label">联系电话：</label>
                                <div class="layui-inline">
                                    <input name="phone" class="layui-input" id="phone" autocomplete="off">
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md3">
                            <div class="layui-form-item">
                                <label class="layui-form-label">备用电话：</label>
                                <div class="layui-inline">
                                    <input name="alternatephone" class="layui-input" id="alternatephone" autocomplete="off" text="date">
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md3">
                            <div class="layui-form-item">
                                <label class="layui-form-label">地址：</label>
                                <div class="layui-inline">
                                    <select name="district" id="district">
                                        <option value="">请选择运输状态</option>
                                        <option value="运输中">运输中</option>
                                        <option value="运输外包中">运输外包中</option>
                                        <option value="装载中">装载中</option>
                                        <option value="未状态">未状态</option>
                                        <option value="运输完成">运输完成</option>
                                    </select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="请选择运输状态" value="" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="" class="layui-select-tips">请选择运输状态</dd><dd lay-value="运输中" class="">运输中</dd><dd lay-value="运输外包中" class="">运输外包中</dd><dd lay-value="装载中" class="">装载中</dd><dd lay-value="未状态" class="">未状态</dd><dd lay-value="运输完成" class="">运输完成</dd></dl></div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md3">
                            <div class="layui-form-item">
                                <label class="layui-form-label">客户等级：</label>
                                <div class="layui-inline">
                                    <select name="clientgrade" id="clientgrade">
                                        <option value="">请选择收费方式</option>
                                        <option value="杭州">单个计算</option>
                                        <option value="宁波">现金支付</option>
                                        <option value="温州">微信支付</option>
                                        <option value="温州">支付宝支付</option>
                                        <option value="温州">网银支付</option>
                                    </select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="请选择收费方式" value="" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="" class="layui-select-tips">请选择收费方式</dd><dd lay-value="杭州" class="">单个计算</dd><dd lay-value="宁波" class="">现金支付</dd><dd lay-value="温州" class="">微信支付</dd><dd lay-value="温州" class="">支付宝支付</dd><dd lay-value="温州" class="">网银支付</dd></dl></div>
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-md3">
                            <div class="layui-form-item">
                                <label class="layui-form-label">银行账号：</label>
                                <div class="layui-inline">
                                    <input name="bankcard" class="layui-input" id="bankcard" autocomplete="off">
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md3">
                            <div class="layui-form-item">
                                <label class="layui-form-label">发货次数：</label>
                                <div class="layui-inline">
                                    <input name="shippingtimes" class="layui-input" id="shippingtimes" autocomplete="off">
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md3">
                            <div class="layui-form-item">
                                <button type="button"  class="layui-btn layui-btn-sm" lay-submit lay-filter="souSuo">搜索数据</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="layui-card-body">
                    <table id="consigner" lay-filter="consignerTable"></table>
                </div>
            </div>
        </div>
    </div>

</div>
<!--菜单工具栏-->
<script type="text/html" id="toolbarMenu">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addMenutble">添加收货人</button>
    </div>
</script>
<!--右边工具栏-->
<script type="text/html" id="barDemoMenu">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>




<script>
    layui.use(['table', 'form', 'jquery', 'layer', 'tree','util'], function () {
        var tree = layui.tree
            ,$ = layui.jquery
            ,table = layui.table
            ,util = layui.util
            ,form = layui.form
            ,layer = layui.layer;

        //菜单表格
        table.render({
            elem: '#consigner'
            ,height: 500
            ,id:'consignerTable'
            ,url: '../../Consigner' //数据接口
            ,toolbar: '#toolbarMenu' //开启头部工具栏，并为其绑定左侧模板
            ,limit:8
            ,limits:[8,16,24,32]
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_menu'
                ,icon: 'layui-icon-tips'
            }]
            ,page: true //开启分页
            ,cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'consignerId', title: '发货id', sort: true}
                ,{field: 'forwardingunit', title: '发货单位'}
                ,{field: 'clientname', title: '发货人'}
                ,{field: 'phone', title: '发货电话'}
                ,{field: 'alternatephone', title: '备用电话'}
                ,{field: 'district', title: '发货地区'}
                ,{field: 'clientgrade', title: '用户等级'}
                ,{field: 'bankcard', title: '银行卡'}
                ,{field: 'shippingtimes', title: '发货数量'}
                ,{field: 'remark', title: '备用地址'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemoMenu'}
            ]]
        });




        //提交数据
        form.on('submit(souSuo)', function(data){
            //执行重载
            table.reload('consignerTable', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                //根据条件查询
                ,where: data.field
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //角色头部工具栏头工具栏事件
        table.on('toolbar(consignerTable)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'addMenutble':
                    //iframe层
                    layer.open({
                        type: 2,
                        title: '新增收货人',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['1100px', '50%'],
                        content: '/src/views/client/iframe/addConsigner.html?id=0' //iframe的url
                    });
                    break;
                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_user':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });

        //监听用户行工具事件
        table.on('tool(consignerTable)', function(obj){
            var data = obj.data;
            console.log(obj)
            /*删除*/
            if(obj.event === 'del'){
                $.ajax({
                    url: "../../XclConsignerControllerDeleteConsignerBy",
                    type: "post",
                    data: {
                        id:data.consignerId
                    },
                    dataType: "text",
                    success: function (data) {
                        form.render();
                        //同步更新表格
                        $(".layui-laypage-btn")[0].click();
                    }
                })
            } else if(obj.event === 'edit'){
                layer.open({
                    type: 2,
                    title: '新增收货人',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['1100px', '50%'],
                    content: '/src/views/client/iframe/addConsigner.html?id='+data.consignerId //iframe的url
                });
            }
        });
    });
</script>
